/*0.给元素统一设置一些样式*/
/*星是通用选择器,能选中一切元素*/
* {
	padding: 0;
	margin: 0;
}

/*1.给网页分区并设置每个区域的尺寸*/
div {
	border: 1px solid red;
	margin: 0 auto;
}
.logo {
	width: 960px;
	height: 61px;
}
.menu {
	height: 91px;
}
.core {
	height: 410px;
	/*预留出渐变条的空间*/
	padding-top: 10px;
}
.cr {
	width: 960px;
	height: 50px;
}
.content {
	width: 950px;
	height: 390px;
	border: 5px solid #8ac1db;
}
.content>div {
	width: 910px;
	height: 40px;
}
.content>.data {
	height: 310px;
}

/*2.设置背景*/
body {
	background-color: #0EA8D8;
}
.logo {
	background-image: 
		url(../img/top_bg.png);
}
.menu {
	background-color: #0488BB;
}
.content {
	background-color: #e8f3f8;
}
.core {
	background:
		url(../img/content_bg.png)
		repeat-x top;
}

/*3.设置文本样式*/
body {
	font-family:
		"微软雅黑","文泉驿正黑","黑体";
	font-size: 14px;
}
.logo {
	text-align: right;
	line-height: 61px;
}
.logo>a {
	margin-right: 40px;
	color: #FFF;
	text-decoration: none;
}
.logo>a:hover {
	font-weight: bold;
}
.cr>p {
	text-align: center;
	color: #FFF;
	height: 25px;
	line-height: 25px;
}

/*4.设置表格样式*/
.data>table {
	border: 1px solid #ccc;
	/*边框合并必须写在table上*/
	border-collapse: collapse;
}
.data td {
	border: 1px solid #ccc;
}
.data>table {
	width: 100%;
}
.data td {
	text-align: center;
}
.data thead tr {
	height: 40px;
	background-color: #fbedce;
	font-weight: bold;
}
.data tbody tr {
	height: 32px;
	background-color: #FFF;
}
.data tbody tr:hover {
	background-color: #f7f9fd;
}
.update {
	padding-left: 15px;
	background:
		url(../img/modification.png)
		no-repeat left;
	border: 0;
}

/* 5.定位logo图片以及消息提示 */
.logo>img{
	float:left;
}

.content>.msg{
	width:500px;
	height:80px;
	
}
.content{
	/* 为了给子元素绝对定位加position */
	position:relative;
}

.content>.msg{
	position:absolute;
	left:250px;
	top:100px;
}

.msg>img{
	float:right;
	margin:5px;
	/*将鼠标变成手型*/
	cursor:pointer;
}

.msg>p{
	line-height:80px;
	margin-left:38px;
	
}

.msg{
	background:#FDECEC
		url("../img/ok.png")
		NO-repeat 10px 32.5px	;
	border:1px solid #f68a8a;
}


/* 6.设置菜单区图片的样式 */
.menu>ul{
	border:1px solid yellow;
	width:960px;
	height:91px;
	margin:0 auto;
	list-style-type:none;
}

.menu li{
	border:1px solid red;
	width:68px;
	height:77px;
	margin:7px 14px;
	float:left;
	
}

.index{
	background-image:
		url(../img/index_out.png)	
	
}

.index:hover{
	background-image:
		url(../img/index_on.png)	
	
}

.role{
	background:
		url(../img/role_out.png)
	
}
.role:hover{
	background:
		url(../img/role_on.png)
	
}


/* 收尾工作：去掉开发过程中用来调试的边框*/

div,.menu>ul,.menu li{
	border:0;
	
}













